<template>
   <div class="mobile-scroll-box" ref="mobileScrollRef">
      <div class="scroll-content">
          <div class="pulldown-scroller" v-if="openPullDown">
              <div class="pulldown-wrapper">
                  <img class="refresh-img" src="../../assets/common/refresh.gif">
                  <div class="refresh-text" v-show="beforePullDown">
                      <span>{{$t('message.mobile.pullToRefresh')}}</span>
                  </div>
                  <div class="refresh-text" v-show="!beforePullDown && isPullingDown">
                      <span>{{$t('message.mobile.refreshing')}}</span>
                  </div>
              </div>
          </div>
          <slot></slot>
          <div class="pullup-tips" v-if="openUpload">
            <div v-if="!isPullUpLoad" class="before-trigger">
              <span class="pullup-txt">{{$t('message.mobile.dropDownLoadMore')}}</span>
            </div>
            <div v-else  class="after-trigger">
              <img class="refresh-img" src="../../assets/common/loading.gif">
            </div>
          </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import BScroll from 'better-scroll'
const emit = defineEmits(["refreshStart",'loadMoreStart'])
const props = defineProps({
    openPullDown:{
        type:Boolean,
        default:false
    },
    openUpload:{
        type:Boolean,
        default:false
    },
    scrollOps:{
        type:Object,
        default(){
            return {
                click:true,
                observeDOM: true,
                probeType: 3,
                pullDownRefresh: {
                    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
                    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
                },
                pullUpLoad: true,
                bounce:{
                    top:true,
                    bottom:false
                }
            }
        }
    }
})

const bscroll = ref(null)
const mapObserver = ref(null)
const beforePullDown = ref(true)
const isPullingDown = ref(false)
const isPullUpLoad = ref(false)
const showUpLoad = ref(false)
const mobileScrollRef= ref()
onMounted(()=>{
    init()
})

watch(()=>props.openPullDown,(newVal,oldVal)=>{
    if(newVal){
        bscroll.value && bscroll.value.openPullDown({
            threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
            stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
        })
    }else{
        bscroll.value && bscroll.value?.closePullDown()
    }
},{deep:true})
watch(()=>props.openUpload,(newVal,oldVal)=>{
    if(newVal){
        bscroll.value && bscroll.value.openPullUp({
            threshold: parseFloat(document.documentElement.style.fontSize) * 3.125
        })
    }else{
        bscroll.value && bscroll.value?.closePullUp()
    }
},{deep:true})

function init(){
    if(!bscroll.value){
        props.scrollOps.bounce.bottom = props.openUpload
        bscroll.value = new BScroll(mobileScrollRef.value, props.scrollOps)
        // 上拉加载
        props.openUpload && bscroll.value.on('pullingUp', pullingUpHandler)
        // 下拉刷新
        props.openPullDown && bscroll.value.on('pullingDown', pullingDownHandler)
        bscroll.value.on('scroll', scrollHandler)
        bscroll.value.on('scrollEnd', e => {
            if(!isPullUpLoad.value&&showUpLoad.value){
                isPullUpLoad.value = true
                emit("loadMoreStart",resetUpLoad) 
            }
        })
    }
}
function pullingUpHandler(){
        
}
function updateScroll(){
    bscroll.value.scrollTo(0, 0);
}
function resetUpLoad(){
    showUpLoad.value = false
    isPullUpLoad.value = false
    bscroll.value.finishPullUp()
    bscroll.value.refresh()  
}
function scrollHandler(pos) {
    if(pos.y<0){
        let boxH = document.querySelector('.mobile-scroll-box').clientHeight,listH=document.querySelector('.scroll-content').clientHeight
        if((pos.y*-1)>(listH-boxH+3.125*parseFloat(document.documentElement.style.fontSize)+50)){
            showUpLoad.value = true
        }
    }else{

    }
}
function pullingDownHandler(){
    beforePullDown.value = false
    isPullingDown.value = true
    emit("refreshStart",resetload)
}
function resetload(){
    isPullingDown.value = false
    setTimeout(() => {
        beforePullDown.value = true
        bscroll.value.finishPullDown()
        bscroll.value.refresh()    
    }, 200);
}

defineExpose({
    updateScroll
})
</script>
<style lang="scss" scoped>
.mobile-scroll-box{
      position: relative;
      overflow: hidden;
      height: 100%;
      .pulldown-scroller{
          position: absolute;
          width: 100%;
          box-sizing: border-box;
          padding: 1.25rem;
          transform: translateY(-100%) translateZ(0);
          text-align: center;
          color: #6F7588;
          background-color: #fff;
          height: 6.25rem;
          display: flex;
          align-items: center;
          justify-content: center;
          .pulldown-wrapper{
              .refresh-img{
                  height: 4.25rem;
                  width: 4.25rem;
              }
              .refresh-text{
                  position: relative;
                  top: -.75rem;
                  font-size: .875rem;
                  &::before{
                      position: absolute;
                      content: '';
                      width: 3.75rem;
                      height: .0625rem;
                      background: #C2C5CF;
                      left: -4.5rem;
                      top:50%;
                  }
                  &::after{
                      position: absolute;
                      content: '';
                      width: 3.75rem;
                      height: .0625rem;
                      background: #C2C5CF;
                      right: -4.5rem;
                      top:50%;
                  }
              }
          }
      }
      .pullup-tips{
          // position: absolute;
          width: 100%;
          height: 3.125rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6F7588;
          // transform: translateY(0%) translateZ(0);
          .before-trigger{
              .pullup-txt{
                  font-size: .875rem;
              }
          }
          .after-trigger{
              text-align: center;
              width: 3.125rem;
              height: 3.125rem;
              img{
                  width: 100%;
              }
          }
      }
  }
</style>